﻿@{
    ViewBag.Title = "车辆轨迹";
    Layout = "~/Views/Shared/_LayoutMapView.cshtml";
}

@section Scripts {
    <script type="text/javascript">
        //全局变量
        var AmbCode = '@ViewBag.AmbCode';
        var BeginTime = '@ViewBag.BeginTime';
        var EndTime = '@ViewBag.EndTime';
        var GPSData = []; //接收车辆GPS数据
        var iconUrlHead = '@Url.Content("~/")'; //解决本地和iis发布图片路径不一致问题
        var showLabelLevel = 14;//地图上显示Label文本标注的缩放级别 add2020-09-16 plq

        //入口函数
        $(function () {
            baiduMapInit(); //百度地图初始化
            //console.log(ambulanceArray);

            InitComboboxData();
            //查询条件赋初值
            $("#GPS_Amb").combobox({
                onLoadSuccess: function () {
                    $("#GPS_Amb").combobox("setValue", AmbCode);
                }
            });
            $("#GPS_dtStart").datetimebox("setValue", BeginTime);
            $("#GPS_dtEnd").datetimebox("setValue", EndTime);

            doSearch();

            //轨迹回放按钮点击事件
            $("#btnPlay").on("click", function () {
                ///多点轨迹回放---待补充
                //选择的画图样式
                var drawstyle = $("input[name='drawstyle']:checked").val();
                //console.log(parseInt(drawstyle));

                clearAmbGpsTrack();
                //添加多点轨迹回放
                //console.log(drawstyle);
                addMultiAmbGpsTrack(JSON.stringify(GPSData), drawstyle);

                //折叠dialog
                $("#page_Dialog").dialog("collapse");

            });

        });

        //function: 百度地图初始化--基本设置
        function baiduMapInit() {
            map = new BMap.Map("map");
            // 创建Map实例
            map.addControl(new BMap.NavigationControl());
            // 添加平移缩放控件
            map.addControl(new BMap.ScaleControl());
            // 添加比例尺控件
            map.addControl(new BMap.OverviewMapControl());
            //添加缩略地图控件
            map.enableScrollWheelZoom();
            //启用滚轮放大缩小
            //map.addControl(new BMap.MapTypeControl());
            //添加地图类型控件
            //添加地图类型控件 edit 2020-09-22 plq 自定义可选的地图类型(去掉默认的三维类型)
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_NORMAL_MAP,
                    BMAP_SATELLITE_MAP,
                    BMAP_HYBRID_MAP
                ],
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT //表示控件停靠的位置--右下
            }));

            map.centerAndZoom(new BMap.Point(initX, initY), initZoom);

            //function：地图zoomend事件回调
            function showInfo(type, target) {
                var zoomLevel = map.getZoom();//获取地图缩放级别
                //console.log(map.getZoom());
                var allOverlay = map.getOverlays();//获取覆盖物
                //console.log(allOverlay);
                //显示隐藏覆盖物
                //if (zoomLevel >= showLabelLevel) {
                //    allOverlay.forEach(function (marker) {
                //        //console.log(marker);
                //        marker.show();
                //    })
                //} else {
                //    allOverlay.forEach(function (marker) {
                //        marker.hide();
                //    })
                //}
                for (var i = 0; i < allOverlay.length; i++) {
                    //注意：在使用allOverlay[i]要进行是否是Marker的判断，因为getOverlays()后会得到类型不同的对象
                    if (allOverlay[i] instanceof BMap.Marker) {
                        //console.log(allOverlay[i]);
                        if (zoomLevel >= showLabelLevel) { //缩放级别大于
                            //判断获取的是否是Label对象，否则没有setStyle()方法
                            if (allOverlay[i].getLabel() instanceof BMap.Label) {
                                allOverlay[i].getLabel().setStyle({ display: 'block' }); //显示文本标注
                            }
                        }
                        else {
                            if (allOverlay[i].getLabel() instanceof BMap.Label) {
                                allOverlay[i].getLabel().setStyle({ display: 'none' }); //隐藏文本标注
                            }
                        }
                    }
                }

            }
            //为地图注册zoomend事件 add2020-09-16 plq
            map.addEventListener("zoomend", showInfo);
        }

        //绑定combobox下拉列表
        function InitComboboxData() {
            $("#GPS_Amb").combobox({
                url: '@Url.Content("~/Home/GetAmbulanceInfo")',
                valueField: 'BianMa',
                textField: 'Name',
                panelHeight: 120,
                multiple: true,
                editable: false,
                prompt: '--请选择--',
            });
        }

        //function:获取车辆GPS数据
        function doSearch() {
            var ambCode = AmbCode; //车辆编码
            var beginDate = $("#GPS_dtStart").datetimebox("getValue");
            var endDate = $("#GPS_dtEnd").datetimebox("getValue");
            var isFilterStop = $("#isFilterStop").checkbox("options").checked; //获取是否过滤停止点复选框选中状态

            //console.log(ambCode);
            //console.log(beginDate);
            //console.log(endDate);
            //验证最大时间间隔是否超出
            $.ajax({
                url: '@Url.Content("~/Home/CheckTime")',
                type: "POST",
                data: {
                    StartTime: beginDate,
                    EndTime: endDate,
                },
                async: false,
                success: function (res) {
                    //console.log(JSON.parse(res));
                    var data = JSON.parse(res);
                    if (data.Result) {

                        $('#gpsListGrid').datagrid({
                            width: '100%',
                            height: '100%',
                            fitColumns: true,
                            singleSelect: true,
                            loadMsg: '数据加载中请稍后……',
                            url: '@Url.Content("~/Home/GetGpsTrack")',
                            striped: true,
                            rownumbers: true,//显示行号
                            pagination: false,//启用分页，默认每页10行
                            //pageSize: 15,//设置 页容量5为
                            //pageList: [10, 15, 20],//设置 页容量下拉框
                            remoteSort: true,
                            //multiSort: true,
                            queryParams: {
                                AmbulanceCode: ambCode,
                                StartTime: beginDate,
                                EndTime: endDate,
                                IsFilterStop: isFilterStop
                            },
                            columns: [[
                               { field: "RealSign", title: "实际标识", width: '16%', align: "center", sortable: false },
                               { field: 'WorkState', title: '工作状态', width: '12%', align: "center", sortable: false },
                               { field: 'GpsTime', title: '时间', width: '24%', align: "center", sortable: false },
                               { field: "Longitude", title: "经度", width: '24%', align: "center", sortable: false },
                               { field: "Latitude", title: "纬度", width: '24%', align: "center", sortable: false },
                               { field: "Height", title: "高度", width: '8%', align: "center", sortable: false },
                               { field: "Speed", title: "速度", width: '8%', align: "center", sortable: false },
                               { field: "Direction", title: "方向", width: '8%', align: "center", sortable: false },
                            ]],
                            //单击事件信息行时，地图移动到对应标注点
                            onClickRow: function () {
                                //var row = $('#gpsListGrid').datagrid('getSelected');
                                //moveToPosition(row.Code, row.RealSign, row.WorkState, row.GpsTime, row.Longitude, row.Latitude, row.Height, row.Speed, row.Direction);
                            },
                            onLoadSuccess: function (data) {
                                //console.log(data);
                                if (!data) {
                                    return false;
                                }
                                if (data.rows.length == 0) {
                                    $("#searchTips").html("指定条件无记录");
                                    $("#btnPlay").linkbutton('disable');
                                }
                                else {
                                    $("#searchTips").html("共" + data.rows.length + "条记录");
                                    $("#btnPlay").linkbutton('enable');
                                    GPSData = data.rows; //缓存GPS数据
                                }
                            }
                        });


                    }
                    else {
                        $.messager.alert('提示', data.Message);
                    }
                }
            });



        }




    </script>
}

<div class="page_Main">
    <div id="map"></div>

    <!--轨迹回放查询弹窗 easyui dialog -->
    <div id="page_Dialog" class="easyui-dialog" title="轨迹回放（点击右侧 三角箭头 折叠展开）" style="width: 600px; height: 420px;left: 10px; top: 10px"
         data-options="iconCls:'icon-GpsCrack',minimizable:false,closable:false,collapsible:true">
        <!--Dialog Content-->
        <!--筛选条件-->
        <table style="width:99%" cellpadding="0" cellspacing="5" border="0">
            <tr style="height:36px;">
                <td align="right" valign="middle" width="15%">车辆：</td>
                <td align="left" valign="middle" width="15%">
                    <input type="hidden" id="GPS_AmbCode" />
                    <input id="GPS_Amb" class="easyui-combobox" style="width:90px" data-options="readonly:true" />
                </td>
                <td align="right" valign="middle" width="17%">开始时刻：</td>
                <td align="left" valign="middle" width="18%">
                    <input id="GPS_dtStart" class="easyui-datetimebox" style="width:150px" />
                </td>
                <td align="right" valign="middle" width="17%">结束时刻：</td>
                <td align="left" valign="middle" width="18%">
                    <input id="GPS_dtEnd" class="easyui-datetimebox" style="width:150px" />
                </td>
            </tr>
            <tr style="height:36px;">
                <td align="left" valign="middle" colspan="3" style="padding:0 20px;">
                    <span id="searchTips">无轨迹点</span>
                </td>
                <td align="center" valign="middle" colspan="3" style="padding:0 20px;">
                    <input id="isFilterStop" class="easyui-checkbox" label="过滤停止点" data-options="labelPosition:'after',labelAlign:'left',checked:true,labelWidth:120">
                    <a href="javascript:void(0)" id="btnsearch" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">查询</a>
                </td>
            </tr>
        </table>
        <!--数据展示-->
        <div class="GpsDataList" style="height:230px;">
            <table id="gpsListGrid"></table>
        </div>
        <div class="btnPlayTr">
            <input id="Radio1" type="radio" name="drawstyle" value="0" checked="checked" />推荐样式
            <input id="Radio2" type="radio" name="drawstyle" value="1" />所有点及连线(慢)
            <input id="Radio3" type="radio" name="drawstyle" value="2" />仅所有点(慢)
            <input id="Radio4" type="radio" name="drawstyle" value="3" />动画
            <span class="btnPlaySpan"><a href="javascript:void(0)" id="btnPlay" class="easyui-linkbutton" data-options="iconCls:'icon-GpsCrack',disabled:true">轨迹回放</a></span>

        </div>
    </div>
</div>

<style>
    body, html, .page_Main, #map {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }

    .checkbox {
        border: 2px solid #1592e6;
    }

    .checkbox-checked {
        border: 0;
        background: #1592e6;
    }

    #searchTips {
        color: red;
    }

    .btnPlayTr {
        position: relative;
        height: 50px;
        line-height: 50px;
    }

    .btnPlaySpan {
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

